import { useEffect, useState } from 'react';
import { Dispatch } from 'redux';
import { useSelector, useDispatch } from 'react-redux';
import { Progress } from 'antd';
import { useChooseDir } from 'renderer/hook/useChoose';
import { GlobalState } from '../../biz/state-manager/global-state-context.state';
import { MinusCountButton } from '../../components/MinusCountButton';
import {
  COMMON_CLEAR_FEATURE_PROGRESS,
  ProgressAction,
} from '../../biz/state-manager/action-type.const';
import { Button, Tooltip } from 'antd';
import './index.css';

import {
  FeatureName,
  Task,
  TaskName,
} from '../../../main/biz/ipc/feature.const';

function VerticalMerge() {
  // const [scanDir, startChooseScanDir] = useChooseDir('/Users/shenzhengyuan/Desktop/NeedScanDir');
  const [scanDir, startChooseScanDir] = useChooseDir('');
  const [exportDir, startChooseExportDir] = useChooseDir('');
  const dispatch = useDispatch<Dispatch<ProgressAction>>();
  const featureProgress: number = useSelector((state: GlobalState) => {
    const progressInfo = state.progressState.progressInfos
      .filter((pregressInfo) => {
        return (
          pregressInfo.task.taskName === TaskName.VERTICAL_MERGE &&
          pregressInfo.task.featureName === FeatureName.VERTICAL_MERGE
        );
      })
      .shift();
    return progressInfo ? progressInfo.progress : 0;
  });
  const doVerticalMerge = async () => {
    if (scanDir === '') {
      window.electronAPI.ipcRenderer.showError('错误', '需要选择扫描路径');
      return;
    }
    if (exportDir === '') {
      window.electronAPI.ipcRenderer.showError('错误', '需要选择导出路径');
      return;
    }
    window.electronAPI.ipcRenderer.verticalMerge(
      new Task(FeatureName.VERTICAL_MERGE, TaskName.VERTICAL_MERGE),
      scanDir,
      exportDir
    );
  };
  useEffect(() => {
    dispatch({
      type: COMMON_CLEAR_FEATURE_PROGRESS,
      progressInfo: {
        task: new Task(FeatureName.VERTICAL_MERGE, TaskName.VERTICAL_MERGE),
        progress: 0,
      },
    });
  }, [scanDir, exportDir, dispatch]);
  useEffect(() => {
    const clearProgress = () => {
      dispatch({
        type: COMMON_CLEAR_FEATURE_PROGRESS,
        progressInfo: {
          task: new Task(FeatureName.VERTICAL_MERGE, TaskName.VERTICAL_MERGE),
          progress: 0,
        },
      });
    };
    clearProgress();
    return clearProgress;
  }, [scanDir, exportDir, dispatch]);
  useEffect(() => {
    if (featureProgress === 1) {
      window.electronAPI.ipcRenderer.showMessage('提示', '导出成功');
    }
  }, [featureProgress]);
  return (
    <div id="vertical-container">
      <h1 id="vertical-head">垂直合并</h1>
      <div>
        <Button onClick={startChooseScanDir}>1.选择扫描的文件夹</Button>
        <div>扫描路径: {scanDir}</div>
      </div>
      <div>
        <Button onClick={startChooseExportDir}>2.导出的文件夹</Button>
        <div>导出路径: {exportDir}</div>
      </div>
      <div>
        <MinusCountButton type="primary" onCustomClick={doVerticalMerge}>
          3.执行合并导出
        </MinusCountButton>
      </div>
      <Progress percent={featureProgress * 100} />
    </div>
  );
}
export default VerticalMerge;
